<template>
  <div class="main">
    <el-row>
      <div class="suo">
        <el-col :span="20" >
          <el-input v-model="input" class="w-50 m-2"  placeholder="搜索求助信息"  size="large">
            <template #suffix>
              <el-button @click="getInput" type="warning" round>搜索</el-button>
            </template>
          </el-input>

        </el-col>
      </div>
      <el-col :span="13"></el-col>
      <el-col :span="5">
        <el-button round @click="toApply" class="upbotton">我要发布</el-button>
      </el-col>
    </el-row>
    <div class="topbox">
      <div v-for="item in currentPageData" :key="item.vid" class="main-el">
        <el-card :body-style="{ padding: '0px' }">
          <img class="vimg"
               :src="item.vimage"
               @click="getPage(item.vid)"/>

          <div style="padding: 14px">
            <span class="vtitle">{{ item.vtitle }}</span>
            <div class="bottom">

              <span class="vsub">{{ item.vsubhead }}</span>
            </div>
          </div>
        </el-card>

      </div>

    </div>
  </div>


  <!--  分页组件-->
  <div class="ye">

  <el-pagination
      v-model="currentPage"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalData.length"
      @current-change="handleCurrentChange">
  </el-pagination>
  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "VolunteerList",
  data() {
    return {
      volunteer: [],
      vid: 1,
      input: '',
      //分页
      tableData: [], // 总数据
      totalData: [], // 总数据
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页显示的条数  //一共多少条数据
    }
  },

  computed: {
    // 根据当前页面和每页显示的条数，计算分页后的数据
    currentPageData() {
      const {totalData, currentPage, pageSize} = this;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      totalData.map
      return totalData.slice(start, end);
    },
  },
  methods: {
    /*点击进入*/
    getPage(vid) {
      this.$router.push('/front/volunteerDetail/' + vid);
    },
    toApply() {
      this.$checkLogin()
      let user = JSON.parse(localStorage.getItem("user"))
      if (user !== null && user.urole !== 1) {
        this.$router.push('/front/addVolunte');
      } else {
        ElMessage.error('您不能发起志愿活动')
      }
    },


    /*模糊搜索*/
    getInput() {
      doThis.doGet("/volun/findlist", {vtitle: this.input}).then(res => {
        console.log(res)
        this.tableData = res.data
        this.totalData = res.data
      })
    }

  },

  mounted() {
    doThis.doGet("/volun/findlist", null).then(res => {
      console.log(res)
      this.tableData = res.data
      this.totalData = res.data

    })
  }
}
</script>

<style scoped>
.main {
  margin: 0 auto;
  width: 1200px;
}

.main-el {
  width: 300px;
  padding-left: 70px;
  margin-top: 80px;
}

.topbox {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;

  margin-top: -80px;

}

.vimg {
  width: 300px;
  height: 235px;
}

.sou {
  margin-left: 30px;
}
.suo{

  margin-bottom: 30px;
  margin-left: 30px;
  padding-top: 20px;


}
.vtitle{
  font-size: 20px;
  margin-left: 35px;
}
  .vsub{

  font-size: 14px;
  color: rgba(116, 114, 114, 0.68);
  margin: 5px;
  padding: 10px;
}
.upbotton {

  margin-left: 0;
  margin-top: 0;
}
.ye {
  margin-top: 15px;
  margin-left: 30px;
}

</style>